<template>
	<view class="rental_info">
		<view class="rental_search">
			<u-icon name="search" class="rental_icon" color="#919191" size="40"></u-icon>
			<u-input class="rental_input" v-model="rentalData" placeholder="搜索房屋信息" height="85" />
		</view>
		<view class="rental_nav" v-show="pageType == 'renting'">
			<text class="nav_item" :class="currNavIndex == 0? 'curr_nav_item':''" @click="changeRentalNav(0)">最新</text>
			<text class="nav_item" :class="currNavIndex == 1? 'curr_nav_item':''" @click="changeRentalNav(1)">整租</text>
			<text class="nav_item" :class="currNavIndex == 2? 'curr_nav_item':''" @click="changeRentalNav(2)">合租</text>
		</view>

		<view class="rental_nav" v-show="pageType == 'buyhouse'">
			<text class="nav_item" :class="currNavIndex == 0? 'curr_nav_item':''" @click="changeBuyhouseNav(0)">最新</text>
			<text class="nav_item" :class="currNavIndex == 1? 'curr_nav_item':''" @click="changeBuyhouseNav(1)">全部</text>
			<text class="nav_item" :class="currNavIndex == 2? 'curr_nav_item':''" @click="changeBuyhouseNav(2)">热门推荐</text>
		</view>

		<scroll-view class="rental_scroll" scroll-y @scrolltolower="scrolltolower">
			<houseList :type="pageType" :houseInfoList="houseInfoList"></houseList>
		</scroll-view>
	</view>
</template>

<script>
	// 房屋列表
	import houseList from '../common/houseList.vue'
	export default {
		components: {
			houseList
		},
		onLoad(option) {
			this.pageType = option.pageType
			if (option.pageType == 'buyhouse') {
				uni.setNavigationBarTitle({
					title: '买房信息'
				})
				this.getbuyhouse()
			} else {
				this.getLease()
			}
		},
		data() {
			return {
				rentalData: '',
				// 当前高亮
				currNavIndex: 0,
				// 页面类型 renting 租房,  buyhouse 买房
				pageType: 'renting',
				houseInfoList: [
					{
						area: null,
						community: {community_id:'' , community_name: ""},
						community_id: null,
						community_name: "",
						community_id: null,
						created_at: null,
						hall: null,
						house_type: "",
						id: null,
						image: "",
						money: "",
						room: null,
						title: "",
						toilet: null
					}
				],
				// 当前页
				page: 1,
				// 每页默认条数
				limit: 10,
				// 房源类型 1 整租 2 合租
				house_type: 0,
				// 是否持续加载
				showGetHouse: true,
				typearry: ['new', 'all', 'hot']
			};
		},
		methods: {
			changeRentalNav(index) {
				this.currNavIndex = index
				this.house_type = index
			},
			changeBuyhouseNav(index) {
				this.currNavIndex = index
				this.house_type = index
			},
			getbuyhouse() {
				let data = {
					page: this.page,
					limit: this.limit,
					house_type: this.typearry[this.house_type]
				}
				this.$http.get('Mini/circle/house/sell', data).then(res => {
					this.houseInfoList=[]
					if (res.code == 200) {
						this.houseInfoList.push(...res.data.data)
						this.showGetHouse = res.data.data.length >= this.limit
					}
				})
			},
			getLease() {
				let data = {
					page: this.page,
					limit: this.limit,
					house_type: this.house_type == 0 ? '' : this.house_type
				}
				this.$http.get('Mini/circle/house/lease', data).then(res => { 
						this.houseInfoList=[]
						if (res.code == 200) {
							this.houseInfoList.push(...res.data.data)
							this.showGetHouse = res.data.data.length >= this.limit
						}
					}) 
			},
			// 获取下一页数据
			scrolltolower() {
				this.page += 1
			}
								},
								watch: {
									page(newNum) {
										if (this.pageType == 'renting') {
											this.showGetHouse && this.getLease()
										} else {
											this.showGetHouse && this.getbuyhouse()
										}
									},
									house_type(newNum) {
										this.showGetHouse = true
										this.page = 1
										this.houseInfoList = []
										if (this.pageType == 'renting') {
											this.getLease()
										} else {
											this.getbuyhouse()
										}
									}
								}
							}
</script>

<style lang="scss">
	.rental_info {
		height: 100vh;
		background-color: #f7f8f9;

		.rental_search {
			position: relative;
			padding: 26rpx 30rpx;
			height: 138rpx;
			background-color: #fff;

			.rental_input {

				// background-color: #efefef;
				// border-radius: 43rpx; 
				input {
					padding-left: 60rpx;
					background-color: #efefef;
					border-radius: 43rpx;
				}
			}

			.rental_icon {
				position: absolute;
				left: 20rpx;
				top: 50%;
				z-index: 10;
				transform: translate(50%, -50%);
			}
		}

		.rental_nav {
			margin: 10rpx 0 4rpx 0;
			padding: 0 30rpx;
			height: 117rpx;
			line-height: 117rpx;
			font-size: 32rpx;
			font-weight: 700;
			background-color: #fff;

			.nav_item {
				margin-right: 63rpx;
			}

			.curr_nav_item {
				display: inline-block;
				height: 100rpx;
				color: #FF7430;
				border-bottom: 3rpx solid #FF7430;
			}
		}

		.rental_scroll {
			height: calc(100vh - 270rpx);
			background-color: #fff;
		}
	}
</style>
=======
},
// 获取下一页数据
scrolltolower(){
this.page += 1
}
},
watch:{
page(newNum){
this.showGetHouse && this.getLease()
},
house_type(newNum){
this.showGetHouse = true
this.page = 1
this.houseInfoList = []
this.getLease()
}
}
}
</script>

<style lang="scss">
	.rental_info {
		height: 100vh;
		background-color: #f7f8f9;

		.rental_search {
			position: relative;
			padding: 26rpx 30rpx;
			height: 138rpx;
			background-color: #fff;

			.rental_input {

				// background-color: #efefef;
				// border-radius: 43rpx; 
				input {
					padding-left: 60rpx;
					background-color: #efefef;
					border-radius: 43rpx;
				}
			}

			.rental_icon {
				position: absolute;
				left: 20rpx;
				top: 50%;
				z-index: 10;
				transform: translate(50%, -50%);
			}
		}

		.rental_nav {
			margin: 10rpx 0 4rpx 0;
			padding: 0 30rpx;
			height: 117rpx;
			line-height: 117rpx;
			font-size: 32rpx;
			font-weight: 700;
			background-color: #fff;

			.nav_item {
				margin-right: 63rpx;
			}

			.curr_nav_item {
				display: inline-block;
				height: 100rpx;
				color: #FF7430;
				border-bottom: 3rpx solid #FF7430;
			}
		}

		.rental_scroll {
			height: calc(100vh - 270rpx);
			background-color: #fff;
		}
	}
</style>
>>>>>>> 8cf7d1ec18eb343c29eac7765e2026e1de100cb4
